<template>
  <div class="goods">
    <div class="wrap">
      <Crumb> </Crumb>
      <img src="../assets/img/banner.4c6b6225.png" width="100%" alt="" />
      <ul class="options">
        <li>
          <strong>排序：</strong>
          <span  :class="{active: index == options1Index}" v-for="item,index in options1" :key="index" @click="options1Fn(item.min, item.max, index)">{{item.txt}}</span>
        </li>
        <li>
          <strong>分类：</strong>
          <span  :class="{active: index == options2Index}" v-for="item,index in options2" :key="index" @click="options2Fn(item.type, index)">{{item.txt}}</span>
        </li>
      </ul>
      <List :arr="goodsListShow" />
      <div class="jz"><span v-show="!isReachBottom" class="iconfont icon-loading"></span><span>{{isReachBottom?"已经到底部了":"Loading..."}}</span></div>
    </div>
  </div>
</template>                            
<script>

import Crumb from "../components/Crumb.vue";
import List from "../components/home/List.vue";
import { GoodsSearchAPI } from "@/request/api";
import {mapState} from "vuex";
import { getScrollTop, getClientHeight, getScrollHeight } from "@/utils";
export default {
  data() {
    return {
       //栏目
      did: 0,
      //1实体 2 虚拟 0 全部
      type: 0,
      //最小积分
      min: 0,
      //最大积分
      max: 0,
      //关键字
      keyword: "",
      //商品列表
      goodsList: [],
      //排序列表
      options1: [
        { min: 0, max: 0, txt: "全部" },
        { min: 0, max: 0, txt: "我还可以兑换" },
        { min: 0, max: 500, txt: "0-500分" },
        { min: 500, max: 1000, txt: "500-1000分" },
        { min: 1000, max: 1500, txt: "1000-1500分" },
        { min: 1500, max: 2500, txt: "1500-2500分" },
        { min: 2500, max: 6500, txt: "2500-6500分" },
        { min: 6500, max: 10000, txt: "6500-10000分" },
      ],
      options1Index: 0,
      // 分类
      options2: [
        { type: 0, txt: "全部" },
        { type: 1, txt: "实体商品" },
        { type: 2, txt: "虚拟商品" },
      ],
      options2Index: 0,
      // 商品列表-显示
      goodsListShow:[],
      //页码
      page: 1,
      //大小 每页显示多少条
      size: 8,
      isLoading:false,
      isReachBottom:false
    };
  },
    computed:{
     ...mapState({
      userInfo:state=>state.userInfo.userInfo,
    }),
  },
  components: {
    Crumb,
    List,
  },
  created(){
     this.keyword = this.$route.query.keyword || "";
    this.goodsSearch();
  },
  mounted(){
window.addEventListener("scroll",this.scrollFn)
  },
  updated(){
    this.options1[1].max=this.userInfo.coin
  },
  beforeDestroy(){
    window.removeEventListener("scroll",this.scrollFn)
  },
  methods:{
    async goodsSearch(){
      let res = await GoodsSearchAPI({
        did:this.did,
        type:this.type,
        min: this.min,
        max: this.max,
        keyword: this.keyword,
      });
      console.log("GoodsSearchAPI",res);
      this.goodsList=res.data;
      this.goodsListShow=this.goodsList.filter((item,index)=>index<8);
       this.page = 1;
       this.isReachBottom = false;
      if (this.goodsListShow.length == this.goodsList.length){
        this.isReachBottom = true;
        return;
      }
    },
    options1Fn(min,max,index){
      this.options1Index=index;
      this.min=min;
      this.max=max;
      this.goodsSearch();
    },
    options2Fn(type,index){
       this.options2Index=index;
       this.type=type;
        this.goodsSearch();
    },
    scrollFn(){
      console.log("滚动了",
        getScrollTop(),
        getClientHeight(),
        getScrollHeight());
        if(getClientHeight()+getScrollTop()>=getScrollHeight()-100){
          console.log("加载下一页数据");
          if(this.goodsListShow.length==this.goodsList.length){
            this.isReachBottom=true;
            return;
          }
          if(!this.isLoading){
            this.isLoading=true;
          this.page++;
          setTimeout(()=>{
            for(let i = (this.page-1)*this.size;i<this.page*this.size;i++){
          console.log("page:", this.page, "i:", i,this.goodsList[i]);
         this.goodsList[i] && this.goodsListShow.push(this.goodsList[i])
          }
          this.isLoading=false
          },500)
          
          }
          
        }
    }
  },
  // watch: {
  //   "$route.query.keyword": {
  //     handler(newVal, oldVal) {
  //       console.log(newVal, oldVal);
  //       this.keyword = newVal;
  //       this.goodsSearch();
  //     },
  //   },
  // },
  beforeRouteUpdate(to, from, next) {
    next();
    console.log("beforeRouteUpdate", to.query, from.query);
    this.keyword = to.query.keyword;
    this.goodsSearch();
  },
};
</script>
 
<style lang = "less" scoped>
@import "../assets/css/public.less";

.goods {
  padding-bottom: 50px;
  background: #efefef;
  padding-top: 20px;
  .options {
    padding-top: 20px;
    padding-bottom: 40px;
    li {
      margin-top: 20px;
      strong {
        color: #000;
        font-weight: bold;
      }
      span {
        margin-right:20px;
        margin-left: 10px;
        cursor: pointer;
        color: #999;
        &.active {
          color: @base-color;
          font-weight: bold;
        }
      }
    }
  }
  .jz{
   display: flex;
   justify-content: center;
   .iconfont{
    display: block; 
    margin-top: 1px;
     margin-right: 5px;
     animation: load 1s linear infinite;
   }
   @keyframes load {
    0%{
     transform: rotate(0deg);
    }
    100%{
       transform: rotate(360deg);
    }
   }
  }
}
</style>